<template>
    <div class="paddB60" style="margin: 5px 20px;">
        <el-table
                :data="applyData"
                border
                size="small"
                class="myApplyTabel"
                @row-click="rowClick"
                :header-cell-style="headRowStyle"
                style="width: 100%">
            <el-table-column
                    prop="workflow_title"
                    align="center"
                    show-overflow-tooltip
                    label="流程标题">
            </el-table-column>
            <el-table-column
                    prop="workflow_no"
                    align="center"
                    show-overflow-tooltip
                    label="流程编号">
            </el-table-column>
            <el-table-column
                    prop="state"
                    align="center"
                    width="180"
                    label="状态">
                <template slot-scope="scope">
                    <span v-html="getRenderValue(scope.row)"></span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="create_time"
                    align="center"
                    width="180"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    prop="over_time"
                    align="center"
                    width="180"
                    label="结束时间">
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    import http from "@/assets/js/http"
    import _g from "@/assets/js/global"
    export default {
        data(){
            return{
                applyData: [],
            }
        },
        methods:{
            /* 渲染流程状态 */
            getRenderValue:function(row){
                switch (row.state){
                    case 0: return '未提交'; break;
                    case 1: return '待审批'; break;
                    case 2: return '审批中'; break;
                    case 3: return '审批完成'; break;
                    case 4: return '退回'; break;
                    case 5: return '取消'; break;
                }
            },
            /* 表头样式 */
            headRowStyle:function({row,column,rowIndex,columnIndex}){
                return 'background:#E6EEF8;color:#222;';
            },
            /* 点击行跳转到流程详细页面 */
            rowClick:function(row, event, column){
                this.$router.push({path:'/guest/materiel/myApply/detail',query:{id:row.id}});
            },
            /* 获取物料申请流程列表 */
            getApplyData:function () {
                this.apiPost('admin/ApplyMateriel/getMyApply','').then(res=>{
                    if (typeof res === "string"){
                        res = JSON.parse(res);
                    }
                    if (res.code != 200){
                        _g.toastMsg('error',res.message);
                    }else{
                        this.applyData = res.data;
                    }
                });
            },
        },
        mounted:function () {
            this.getApplyData();
        },
        mixins: [http]
    }
</script>

<style scoped>

</style>
<style>
.myApplyTabel .el-table__body tr:hover{
    cursor: pointer;
}
</style>